<template>
  <el-container style="height: auto">
      <el-header style="height: 88px">
        <div style="height: 300px">
          <span class="title" style="width: auto">
            基于卷积自编码特征提取和哈希算法的图像检索云平台
          </span>
          <span style="float: right">
          <el-tooltip class="item" effect="dark" content="检索历史" placement="bottom-start">
            <el-button type="success" icon="el-icon-s-promotion"
                       circle @click="search">
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="nickname" placement="bottom">
            <el-button type="primary" Message Box
                       icon="el-icon-user-solid"
                       circle @click="demo">
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="注销登录" placement="bottom-end">
            <el-button type="danger" icon="el-icon-delete-solid"
                       circle @click="logout">
            </el-button>
          </el-tooltip>

        </span>
        </div>
      </el-header>
      <el-main>
        <el-table
            :data="tableData"
            style="width: 100%"
        >
          <el-table-column
              label="输入图像路径"
              >
              <template slot-scope="scope">
                <el-link type="primary"
                        :href="scope.row.inputFileId"
                          target="_blank">{{scope.row.inputFileId}}</el-link>
              </template>
          </el-table-column>
          <el-table-column
                label="输出图像路径"
                >
            <template slot-scope="scope">
              <el-link type="success"
                      :href="scope.row.outputFileId"
                        target="_blank">{{scope.row.outputFileId}}</el-link>
            </template>
          </el-table-column>
          <el-table-column
              label="状态"
          >
            <template slot-scope="scope">
              <el-link type="info"
                       >{{scope.row.status}}</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
  </el-container>
</template>

<script>
import store from "@/store";
import api, {gatewayUrl} from "@/utils/api";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    const tableData=[
      {}
    ];
    const nickname = "";
    return {
      tableData,
      nickname
    };
  },
  created() {
    this.search();
  },
  methods: {
    demo(){
      this.$message({
        message: "Your nickName is "+this.nickname,
        type: 'success'
      });
    },
    search(){
      api.test().then(
          res=>{
            const preFix = gatewayUrl+"/aiApplication/file/";
            // console.log(store.getters.getNickname)
            this.nickname = store.getters.getNickname;
            this.tableData = res.data.data;
            for (let i = 0; i < this.tableData.length; i++) {
              this.tableData[i].inputFileId = preFix + this.tableData[i].inputFileId;
              this.tableData[i].outputFileId = preFix + this.tableData[i].outputFileId;
            }
          }
      ).catch(
          err=>{
            console.log(err)
          }
      )
    },
    logout(){
      this.$confirm('确定要注销登录吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
      }).then(() => {
        console.log(store.getters.getToken)
        api.logout(store.getters.getToken).then(
            res=>{
              if(res.data.code===200){
                this.$message({
                  type: 'success',
                  message: '注销成功!'
                });
                // store.commit("setToken","");
                this.$store.commit("delToken");
                this.$store.commit("delNickname")
                this.$router.push("/login");
              }else{
                this.$message({
                  type: 'error',
                  message: '注销失败!'
                });
              }
            }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消注销'
        });
      });
    }
  }
};
</script>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 70px;
  padding: 20px;
}
  .el-main {
    background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
    height: 100%;
}
  .title{
    font-family: "Microsoft YaHei",serif;
    color: ghostwhite;
    font-weight: 500;
    font-size: 20px;
  }

</style>
